<template>
<div class="ui-con-box">
    <h2>Table 表格</h2>
    <h5>用于展示多条结构类似的数据</h5>
    <h3>基础表格1</h3>
    <div class=" ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g clearfix">
            <div class="qb-list-g">
              <div class="qb-list-g__table">
                <div class="clearfix">
                  <div class="column">
                    <div class="rob-table-responsive">
                      <table class="rob-table rob-table-striped rob-table-hover">
                        <thead>
                          <tr>
                            <th class="text-center">
                              编号
                            </th>
                            <th>
                              产品
                            </th>
                            <th>
                              交付时间
                            </th>
                            <th>
                              状态
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-center">
                              1
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td class="qb-has-error">
                              01/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              1
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td>
                              01/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              2
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td>
                              02/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              3
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td>
                              03/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              <span>4</span>
                            </td>
                            <td>
                              <span>lllll</span>
                            </td>
                            <td>
                              kkk
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>

                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="qb-list-g__pagination bdtop-color clearfix">
                <div class="clearfix">
                  <ul class="rob-pagination-jump ">
                    <li class="disabled">
                      <a href="javascript:;">&lt;</a>
                    </li>
                    <li class="active">
                      <a href="javascript:;">1</a>
                    </li>
                    <li>
                      <a href="javascript:;">2</a>
                    </li>
                    <li>
                      <a href="javascript:;">3</a>
                    </li>
                    <li>
                      <a href="javascript:;">4</a>
                    </li>
                    <li>
                      <a href="javascript:;">&gt;</a>
                    </li>
                    <li class="dis">
                      共100页,到第
                      <input type="text">
                    </li>
                    <li class="dis">
                      <a href="javascript:;">确定</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="ui-message-show-code"></div>
      </div>

    </div>

    <h3>基础表格2</h3>
    <div class=" ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g clearfix">
            <div class="qb-list-g">
              <div class="qb-list-g__table">
                <div class="clearfix">
                  <div class="column">
                    <div class="rob-table-responsive">
                      <table class="rob-table rob-table-striped rob-table-hover">
                        <thead>
                          <tr>
                            <th class="text-center">
                              编号
                            </th>
                            <th>
                              产品
                            </th>
                            <th>
                              交付时间
                            </th>
                            <th>
                              状态
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-center">
                              1
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td class="qb-has-error">
                              01/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              1
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td>
                              01/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              2
                            </td>
                            <td>
                              TB - Monthly
                            </td>
                            <td>
                              02/04/2012
                            </td>
                            <td>
                              <em class="qb-icon-home"></em>
                            </td>
                          </tr>

                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="qb-list-g__pagination bdtop-color clearfix">
                <div class="rob-row clearfix">

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui-message-show-code"></div>
      </div>

    </div>

    <h3>基础表格3</h3>
    <div class="ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g ">
            <div class="qb-column-header-g">
              权限列表
            </div>
            <div class="rob-table-responsive">
              <table class="rob-table rob-table-striped rob-table-bordered-erect qb-table-g qb-table-label-g">
                <thead>
                  <tr>
                    <th> 一级菜单</th>
                    <th> 二级菜单</th>

                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td> 首页</td>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 入金</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 出金111</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 贷款意向申请</label>
                    </td>
                  </tr>

                  <tr>
                    <td> 首页</td>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 批量经办撤销</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 批量经办审批</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 收款方编辑</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 用途编辑</label>
                    </td>
                  </tr>

                  <tr>
                    <td rowspan="2"> 代发</td>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 单笔经办</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 批量经办</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 单笔经办查询</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 单笔经办撤销</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 单笔经办审批</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 批量经办查询</label>
                    </td>

                  </tr>

                  <tr>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for="">余额查询</label>
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for="">交易查询</label>
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for="">入金</label>
                    </td>
                  </tr>

                  <tr>
                    <td rowspan="1"> 代发222</td>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 代发经办</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 代发查询</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 代发撤销</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 代发审批</label>
                    </td>

                  </tr>
                  <tr>
                    <td rowspan="1"> 授信管理</td>
                    <td class="text-left">
                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 贷款进度查询</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 还款查询</label>

                      <input type="checkbox" id="" class="rob-checkbox-filled-in" checked="checked">
                      <label for=""> 贷款意向查询</label>

                    </td>

                  </tr>
                </tbody>

              </table>
            </div>

          </div>
        </div>
        <div class="ui-message-show-code"></div>
      </div>

    </div>

    <h3>基础表格4</h3>
    <div class=" ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g ">
            <div class="qb-column-header-g">
              业务规则权限列表
            </div>
            <div class="rob-table-responsive">
              <table class="rob-table rob-table-striped rob-table-bordered-erect qb-table-g qb-table-label-g">
                <thead>
                  <tr>
                    <th> 业务模块</th>
                    <th> 业务</th>
                    <th> 权限描述</th>

                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td rowspan="5"> 账务查询</td>
                    <td> 入金</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>

                    </td>

                  </tr>

                  <tr>
                    <td> 出金</td>
                    <td class="text-left">
                      <label for="">无操作权限</label>

                    </td>
                  </tr>

                  <tr>
                    <td rowspan="2"> 交易查询</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td> 收费查询</td>
                    <td class="text-left">
                      <label for="">无操作权限</label>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr>
                    <td rowspan="5"> 支付结算</td>
                    <td> 单笔经办</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户2</label>
                      <label for="">规则名称：支付原材料费用</label>
                      <label for="">权限：经办权限、初审权限</label>

                    </td>

                  </tr>

                  <tr>
                    <td> 账户：融数钱包虚拟账户</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td rowspan="2"> 交易查询</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td> 代发</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr>
                    <td rowspan="5"> 代发</td>
                    <td> 业务</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>

                    </td>

                  </tr>

                  <tr>
                    <td> 代发</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td rowspan="2"> 交易查询</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>

                  <tr>
                    <td> 代发</td>
                    <td class="text-left">
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                      <label for="">账户：融数钱包虚拟账户</label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>
        <div class="ui-message-show-code"></div>
      </div>

    </div>

    <h3>基础表格5</h3>
    <div class=" ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g clearfix">
            <div id="myTabContent1" class="tab-content qb-column-header-g--tabs--tab-content">
              <div role="tabpanel" id="home1" aria-labelledby="home-tab">
              </div>
              <div role="tabpanel" id="profile1" aria-labelledby="profile-tab">
                <div role="tabpanel" class="" aria-labelledby="dropdown1-tab">
                  <ul id="myTabs" class="rob-nav rob-nav-tabs2 " role="tablist">
                    <li role="presentation" class="">
                      <a href="#home2" id="home-tab" role="tab" data-toggle="rob-tab" aria-controls="home" aria-expanded="false">账务查询</a>
                    </li>
                    <li role="presentation" class="active">
                      <a href="#profile2" role="tab" id="profile-tab" data-toggle="rob-tab" aria-controls="profile" aria-expanded="true">支付结算</a>
                    </li>
                    <li role="presentation" class="dropdown">
                      <a href="#dropdown12" role="tab" id="dropdown1-tab" data-toggle="rob-tab" aria-controls="dropdown1">融资业务</a>
                    </li>
                    <button class="rob-btn rob-btn-minor rob-btn-circle qb-pull-right-g mr20" type="button">增加经办人员</button>
                  </ul>

                  <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade" id="home2" aria-labelledby="home-tab">
                    </div>
                    <div role="tabpanel" id="profile2" aria-labelledby="profile-tab">
                      <div class="qb-list-g">
                        <div class="qb-list-g__table">
                          <div class="rob-row clearfix">
                            <div class="rob-col-lg-24 column">
                              <div class="rob-table-responsive">
                                <table class="rob-table rob-table-striped rob-table-hover">
                                  <thead>
                                    <tr>
                                      <th class="text-center">
                                        编号
                                      </th>
                                      <th>
                                        产品
                                      </th>
                                      <th>
                                        交付时间
                                      </th>
                                      <th>
                                        状态
                                      </th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td class="text-center">
                                        1
                                      </td>
                                      <td>
                                        TB - Monthly
                                      </td>
                                      <td>
                                        01/04/2012
                                      </td>
                                      <td class="">
                                        22
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="text-center">
                                        1
                                      </td>
                                      <td>
                                        TB - Monthly
                                      </td>
                                      <td>
                                        01/04/2012
                                      </td>
                                      <td>
                                        2
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="text-center">
                                        2
                                      </td>
                                      <td>
                                        TB - Monthly
                                      </td>
                                      <td>
                                        02/04/2012
                                      </td>
                                      <td>
                                        12
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="text-center">
                                        3
                                      </td>
                                      <td>
                                        TB - Monthly
                                      </td>
                                      <td>
                                        03/04/2012
                                      </td>
                                      <td>
                                        2
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="text-center">
                                        <span>lllll</span>
                                      </td>
                                      <td>
                                        <span>lllll</span>
                                      </td>
                                      <td>
                                        kkk
                                      </td>
                                      <td>
                                        1
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" id="dropdown11" aria-labelledby="dropdown1-tab">
              </div>
            </div>
          </div>
        </div>
        <div class="ui-message-show-code"></div>
      </div>
    </div>

    <h3>基础表格6</h3>
    <div class=" ui-msg-pd40">
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <div class="qb-panel-g">

            <div class="qb-list-g">
              <div class="qb-list-g__table">
                <div class="rob-row clearfix">
                  <div class="rob-col-lg-24 column">

                    <div class="rob-table-responsive">
                      <table class="rob-table rob-table-striped rob-table-hover">
                        <thead>
                          <tr>
                            <th>
                              编号
                            </th>
                            <th>
                              产品
                            </th>
                            <th>
                              交付时间
                            </th>
                            <th>
                              状态
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="qb-nodate-g__nohover">
                            <td colspan="4">
                              <div class="qb-nodate-g__box mb140">
                                <span class="bg_icon qb-nodate-g"></span>
                                <p>无数据</p>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="ui-message-show-code"></div>
      </div>
    </div>
  </div>

</template>
<style lang="css" scoped>
.rob-upload .rob-upload-card .rob-upload-card-type {
  margin: 21px 24px;
}

.rob-upload .rob-upload-card:hover {
  border: 1px solid #dc0000;
}
</style>
